<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>订单审核</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="pageContentWhole">
      <a-row>
        <a-col :span="24">
          <a-form layout="inline">
            <a-form-item label="客户名称">
              <a-input v-model="form.custNameLike" class="selectInputWidth" />
            </a-form-item>
            <a-form-item label="公司编号">
              <a-input v-model="form.orderCodeLike" class="selectInputWidth" />
            </a-form-item>
            <a-form-item label="订单类型">
              <a-select v-model="form.orderType" style="width:150px">
                <a-select-option value>全部</a-select-option>
                <a-select-option value="DOMESTIC_TRADE_EXPORTS">内贸出口订单</a-select-option>
                <a-select-option value="DOMESTIC_TRADE_IMPORTS">内贸进口订单</a-select-option>
                <a-select-option value="FOREIGN_TRADE_EXPORTS">外贸出口订单</a-select-option>
                <a-select-option value="FOREIGN_TRADE_IMPORTS">外贸进口订单</a-select-option>
                <a-select-option value="UNITED_TRANSPORT_EXPORTS">联运出口订单</a-select-option>
                <a-select-option value="UNITED_TRANSPORT_IMPORTS">联运进口订单</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="运输条款">
              <a-select v-model="form.transportTerms" style="width:120px">
                <a-select-option value>全部</a-select-option>
                <a-select-option value="DO-DO">门到门</a-select-option>
                <a-select-option value="DO-CY">门到港</a-select-option>
                <a-select-option value="CY-DO">港到门</a-select-option>
                <a-select-option value="CY-CY">港到港</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="结算类型">
              <a-select v-model="form.settlementType" style="width:120px">
                <a-select-option value>全部</a-select-option>
                <!-- <a-select-option :value="1">票结</a-select-option> -->
                <!-- <a-select-option :value="2">月结</a-select-option> -->
                <a-select-option v-for="v in settlementTypeList" :key="v.key">{{v.value}}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="所属部门">
              <a-tree-select
                class="selectInputWidth"
                v-model="form.deptId"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                :load-data="onLoadData"
                :tree-data="deptTreeData"
                placeholder="请选择"
                @change="onChangeTree"
              ></a-tree-select>
            </a-form-item>
            <a-form-item label="所属销售">
              <a-select v-model="form.sellerId" class="selectInputWidth">
                <a-select-option v-for="v in sellers" :key="v.uiId">{{v.name}}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="起运港">
              <a-input v-model="form.startPortLike" class="selectInputWidth" />
            </a-form-item>
            <a-form-item label="目的港">
              <a-input v-model="form.endPortLike" class="selectInputWidth" />
            </a-form-item>
            <a-form-item>
              <a-input-group compact>
                <a-select v-model="form.dateSearchType" style="width:110px">
                  <a-select-option :value="1">创建时间</a-select-option>
                  <a-select-option :value="2">装货时间</a-select-option>
                  <a-select-option :value="3">完成时间</a-select-option>
                </a-select>
                <template>
                  <a-range-picker
                    v-if="form.dateSearchType === 2"
                    @change="onChange"
                    format="YYYY-MM-DD HH:mm"
                    :show-time="{ format: 'HH:mm' }"
                  >
                    <a-icon slot="suffixIcon" type="calendar" />
                  </a-range-picker>
                  <a-range-picker v-else @change="onChange">
                    <a-icon slot="suffixIcon" type="calendar" />
                  </a-range-picker>
                </template>
              </a-input-group>
            </a-form-item>
            <a-form-item label="操作员" prop="handlerId">
              <a-select v-model="form.handlerId" style="width:120px">
                <a-select-option
                  v-for="(item,index) in handlerList"
                  :key="index"
                  :value="item.uiId"
                >{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="check">查询</a-button>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    </div>
    <!-- 订单审核列表 -->
    <a-spin :spinning="spinning">
      <a-row class="orderItem ordertem_de" v-if="listData.length > 0">
        <a-col :span="24">
          <div v-for="(v, index) in listData" :key="index" class="orderList">
            <a-card size="small">
              <template slot="title">
                <a-descriptions :column="4" class="titleCard" style="padding-left:24px;">
                  <a-descriptions-item label="公司编号">{{v.orderCode}}</a-descriptions-item>
                  <!-- <a-descriptions-item label="结算类型">{{v.settlementType === 1 ? '票结' : '月结'}}</a-descriptions-item> -->
                  <a-descriptions-item label="结算类型">{{checkSettlementTypeName(v.settlementType)}}</a-descriptions-item>
                  <a-descriptions-item label="创建日期">{{v.createTime}}</a-descriptions-item>
                  <a-descriptions-item label="所属销售">{{v.seller}}</a-descriptions-item>
                </a-descriptions>
              </template>
              <a-descriptions :column="4" size="small" class="order_detail">
                <a-descriptions-item label="客户名称">
                  <a-tooltip placement="top" style="cursor:pointer">
                    <template slot="title">
                      <span>{{v.custName}}</span>
                    </template>
                    {{v.custName}}
                  </a-tooltip>
                </a-descriptions-item>
                <template>
                  <a-descriptions-item v-if="v.transportTerms=== 'DO-DO'" label="运输条款">门到门</a-descriptions-item>
                  <a-descriptions-item v-else-if="v.transportTerms=== 'DO-CY'" label="运输条款">门到港</a-descriptions-item>
                  <a-descriptions-item v-else-if="v.transportTerms=== 'CY-DO'" label="运输条款">港到门</a-descriptions-item>
                  <a-descriptions-item v-else-if="v.transportTerms=== 'CY-CY'" label="运输条款">港到港</a-descriptions-item>
                </template>
                <a-descriptions-item label="箱型箱量">{{v.containerType}}*{{v.containerNum}}</a-descriptions-item>
                <a-descriptions-item label="起运/目的港">{{v.startPortName}} — {{v.endPortName}}</a-descriptions-item>

                <template>
                  <a-descriptions-item
                    v-if="v.orderType === 'DOMESTIC_TRADE_EXPORTS'"
                    label="订单类型"
                  >内贸出口订单</a-descriptions-item>
                  <a-descriptions-item
                    v-else-if="v.orderType === 'DOMESTIC_TRADE_IMPORTS'"
                    label="订单类型"
                  >内贸进口订单</a-descriptions-item>
                  <a-descriptions-item
                    v-else-if="v.orderType === 'FOREIGN_TRADE_EXPORTS'"
                    label="订单类型"
                  >外贸出口订单</a-descriptions-item>
                  <a-descriptions-item
                    v-else-if="v.orderType === 'FOREIGN_TRADE_IMPORTS'"
                    label="订单类型"
                  >外贸进口订单</a-descriptions-item>
                  <a-descriptions-item
                    v-else-if="v.orderType === 'UNITED_TRANSPORT_EXPORTS'"
                    label="订单类型"
                  >联运出口订单</a-descriptions-item>
                  <a-descriptions-item
                    v-else-if="v.orderType === 'UNITED_TRANSPORT_IMPORTS'"
                    label="订单类型"
                  >联运进口订单</a-descriptions-item>
                </template>
                <a-descriptions-item label="货名">{{v.goodsName}}</a-descriptions-item>
                <a-descriptions-item label="装货时间">{{v.loadingTime}}</a-descriptions-item>
                <a-descriptions-item label="操作员">{{v.handler}}</a-descriptions-item>
              </a-descriptions>
            </a-card>
            <a-card size="small" style="border-top:none" class="order_czuo">
              <template slot="title">
                <a-descriptions :column="12" class="titleCard">
                  <template>
                    <a-descriptions-item v-if="v.status === 2" :span="2">
                      <a-badge color="#7CB305" text="进行中" />
                    </a-descriptions-item>
                    <a-descriptions-item v-else-if="v.status === 1" :span="2">
                      <a-badge color="#FAAD14" text="待审核" />
                    </a-descriptions-item>
                    <a-descriptions-item v-else-if="v.status === 4" :span="2">
                      <a-badge color="#CF1322" text="审核失败" />
                    </a-descriptions-item>
                    <a-descriptions-item v-else-if="v.status === 3" :span="2">
                      <a-badge color="#474747" text="已完成" />
                    </a-descriptions-item>
                  </template>
                </a-descriptions>
              </template>
              <a-button
                slot="extra"
                ghost
                type="primary"
                style="margin-left:12px"
                @click.stop="examine(v)"
              >审核</a-button>
            </a-card>
          </div>
          <p class="orderPagination">
            <a-pagination
              show-size-changer
              :current="pagination.current"
              :total="pagination.total"
              :showTotal="pagination.showTotal"
              @showSizeChange="pagination.onShowSizeChange"
              @change="pagination.onChange"
            />
          </p>
        </a-col>
      </a-row>
      <a-empty v-else />
    </a-spin>
  </div>
</template>

<script>
import {mixin} from '@/common/common'
import { querySellerDown, queryDeptDown } from '@/api'
import { queryAuditOrderInfoList } from '@/api/salesCenter'
const deptData = {
  type: 1, // type 1判断权限 2不判断
  dataRole: 'CONTAINER_SELL'
}
const sellerData = {
  type: 1, // type 1判断权限 2不判断
  dataRole: 'CONTAINER_SELL',
  status: 1
}
export default {
  mixins: [mixin],
  data () {
    return {
      form: {
        deptId: '', // 所属部门id
        sellerId: '', // 销售id
        handlerId: '', // 操作员id
        status: 1, // 状态：1待审核，2进行中，3已完成，4审核不通过
        custNameLike: '', // 客户名称
        orderCodeLike: '', // 公司编号
        orderType: '', // 订单类型
        transportTerms: '', // 运输条款 DO-CY 门到港 以此类推
        settlementType: '', // 结算方式：1票结，2月结
        startPortLike: '', // 起运港
        endPortLike: '', // 目的港
        dateSearchType: 1, // 1、创建时间 2、装货时间 3.完成时间
        startDate: '', // 开始时间
        endDate: '' // 结束时间
      },
      handlerList: [],
      spinning: false,
      // 订单card start
      listData: [],
      columns: [],
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      pagination: {},
      deptTreeData: [],
      sellers: [],
      btnControl: {}
    }
  },
  methods: {
    // 操作员列表
    handlerListRequest (e) {
      querySellerDown(e)
        .then(res => {
          // // console.log(res)
          this.handlerList = res.data
          this.handlerList = res.data.map((v, i) => {
            if (!v.uiId) {
              v.name = '请选择'
              v.uiId = ''
            }
            return v
          })
          this.form.handlerId = this.handlerList[0].uiId
          this.orderListRequest({
            ...this.form,
            pageNum: this.pageNum,
            pageSize: this.pageSize
          })
        })
        .catch(rs => {})
    },
    orderListRequest (e) {
      this.spinning = true
      queryAuditOrderInfoList(e)
        .then(res => {
          // // console.log(res.data)
          this.listData = res.data.list
          this.pagination = this.getPagination(res.data)
          // let { pageNum, pageSize, total, pages } = res.data
          // this.pagination = { pageNum, pageSize, total, pages }
          setTimeout(() => {
            this.spinning = false
          }, 300)
        })
        .catch(rs => {})
    },
    onShowSizeChange (current, size) {
      this.pageNum = current
      this.pageSize = size
      this.handleSubmit()
    },
    paginationOnChange (pageNum) {
      this.pageNum = pageNum
      this.handleSubmit()
    },
    onChange (data, dateString) {
      this.form.startDate = dateString[0]
      this.form.endDate = dateString[1]
    },
    check () {
      this.pageNum = 1
      // this.pageSize = 10
      this.orderListRequest({
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    handleSubmit () {
      this.orderListRequest({
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    examine (e) {
      // // console.log(e)
      if (!this.btnControl.audit) {
        this.$message.error('您无此权限！')
        return false
      }
      this.$router.push({ path: `/orderCenter/order/edit/${e.id}` })
    },
    onLoadData (treeNode) {
      return new Promise(resolve => {
        if (treeNode.dataRef.children && treeNode.dataRef.children.length > 0) {
          resolve()
          return
        }
        queryDeptDown({ parentId: treeNode.dataRef.key, ...deptData }).then(
          rsp => {
            let childrenData = []
            rsp.data.forEach(value => {
              childrenData.push({
                title: value.name,
                key: value.deptId,
                value: value.deptId
              })
            })
            treeNode.dataRef.children = childrenData
            this.deptTreeData = [...this.deptTreeData]
            resolve()
          }
        )
      })
    },
    initDept (e) {
      queryDeptDown(e).then(rsp => {
        let initData = []
        rsp.data.forEach((value, index) => {
          initData.push({
            title: value.name,
            key: value.deptId,
            value: value.deptId
          })
        })
        this.deptTreeData = initData
      })
    },
    onChangeTree (value) {
      this.initSellerDown(value)
    },
    initSellerDown (deptId) {
      querySellerDown({ ...sellerData, deptId }).then(rsp => {
        this.sellers = rsp.data.map((v, i) => {
          if (!v.uiId) {
            v.name = '请选择'
            v.uiId = ''
          }
          return v
        })
      })
    },
    getPagination (data) {
      const pages = data ? data.pages : 0
      return {
        current: this.pageNum,
        pageSize: this.pageSize,
        total: data ? data.total : 0,
        showTotal: total => `共${total}条记录 第${this.pageNum}/${pages}页`,
        onChange: pageNum => {
          this.pageNum = pageNum
          this.handleSubmit()
        },
        onShowSizeChange: (current, size) => {
          this.pageNum = current
          this.pageSize = size
          this.handleSubmit()
        }
      }
    }
  },
  created () {
    this.$nextTick(() => {
      this.btnControl = this.$root._bc
      // // console.log(this.$root._bc)
    })
    this.pagination = this.getPagination()
    // 所属部门
    this.initDept(deptData)
    // 所属销售
    this.initSellerDown()
    this.handlerListRequest({
      type: 1,
      dataRole: 'CONTAINER_OPR',
      status: 1
    })
  }
}
</script>

<style>
</style>
